import { computed, defineComponent, ref } from "vue";
import PageTitle from "@/components/PageTitle";
import { IFormRef } from "@/components/Form/types";
import ButtonView from "@/components/ButtonView";
import { useRequest } from "./request";
import FormGroup from "@/components/FormGroup";
import { FormGroupPropsData } from "@/components/FormGroup/types";
export default defineComponent({
  name: "",
  setup() {
    const userInfo = localStorage.getItem("userInfo") as string;
    const userInfoJSON = JSON.parse(userInfo) as any;
    const { confirm, productList } = useRequest();
    const formRef = ref<IFormRef>();
    const form = ref({
      applyName: userInfoJSON.name,
      phone: userInfoJSON.phone,
    });
    const data2 = computed<FormGroupPropsData[]>(() => [
      {
        title: "",
        data: [
          {
            label: "真实姓名",
            type: "input",
            key: "applyName",
            readonly: true,
            rules: [
              {
                required: true,
              },
            ],
          },
          {
            label: "联系电话",
            type: "input",
            key: "phone",
            readonly: true,
            rules: [
              {
                required: true,
              },
            ],
          },
          {
            label: "溯源产品",
            type: "select",
            key: "productId",
            rules: [
              {
                required: true,
              },
            ],
            typeData: productList.value,
          },
          {
            label: "预约日期",
            type: "calendar",
            key: "time",
            rules: [
              {
                required: true,
              },
            ],
          },
        ],
      },
      {
        title: "",
        data: [
          {
            key: "remarks",
            label: "备注",
            type: "textarea",
          },
        ],
      },
    ]);
    const render1 = () => {
      return (
        <div class={"p-[10px]"}>
          <FormGroup
            data={data2.value}
            v-model={form.value}
            ref={formRef}
            class="m-child-top-20"
          />
          <ButtonView
            block
            type="primary"
            class="!mt-[20px] !h-[40px]"
            onClick={() => {
              formRef.value?.submit(({ result, error, submitState }) => {
                submitState && confirm(form.value);
              });
            }}
          >
            确定
          </ButtonView>
        </div>
      );
    };
    return () => {
      return <PageTitle title="溯源申请">{render1()}</PageTitle>;
    };
  },
});
